import React from 'react';
import '../styles/components.css';

const AlertHistory = ({ alerts, onBack }) => {
  return (
    <div className="history-container">
      <div className="history-header">
        <button className="back-button" onClick={onBack}>
          ← 返回
        </button>
        <h2>报警记录</h2>
        <span className="history-count">共 {alerts.length} 条记录</span>
      </div>
      
      {alerts.length === 0 ? (
        <div className="empty-history">
          <div className="empty-icon">📋</div>
          <h3>暂无报警记录</h3>
          <p>您的报警记录将显示在这里</p>
        </div>
      ) : (
        <div className="history-list">
          {alerts.map(alert => (
            <div key={alert.id} className="history-item">
              <div className="alert-main">
                <div className="alert-contact">
                  <div className="contact-avatar small">
                    {alert.contact.name.charAt(0)}
                  </div>
                  <div className="contact-info">
                    <strong>{alert.contact.name}</strong>
                    <span>{alert.contact.phone}</span>
                  </div>
                </div>
                <div className={`alert-status ${alert.status === '成功' ? 'success' : 'failed'}`}>
                  {alert.status}
                </div>
              </div>
              
              {alert.note && (
                <div className="alert-note">
                  {alert.note}
                </div>
              )}
              
              <div className="alert-meta">
                <span className="alert-time">{alert.timestamp}</span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default AlertHistory;